<template>
    <el-dialog
        :title="title"
        :visible.sync="visible"
        width="80%"
        @close="close"
    >
        <div>
            <el-form
                :model="form"
                ref="formData"
                :inline="false"
                label-width="130px"
                size="normal"
                label-position="right"
            >
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="车架号:" prop="vinNo"
                                      :rules="{
                                         required: true,
                                         message: '请选择车架号',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.vinNo, callback)
                                       }">
                            <el-select
                                filterable
                                @change="vinSel"
                                v-model="form.vinNo"
                                clearable
                                style="width: 100%"
                            >
                                <template v-for="dict in vinList">
                                    <el-option
                                        :label="dict.vinNo"
                                        :value="dict.vinNo"
                                        :key="dict.carId"
                                    ></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="车牌号:" prop="carNo"
                                      :rules="{
                                         required: true,
                                         message: '请选择车牌号',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.carNo, callback)
                                       }">
                            <el-select
                                filterable
                                @change="carSel"
                                v-model="form.carNo"
                                clearable
                                style="width: 100%"
                            >
                                <template v-for="dict in carNoList">
                                    <el-option
                                        :label="dict.carNo"
                                        :value="dict.carNo"
                                        :key="dict.carId"
                                    ></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="品牌/车型/车款:" prop="carmodel"
                                      :rules="{
                                         required: true,
                                         message: '请选择品牌/车型/车款',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.carmodel, callback)
                                       }">
                            <el-input
                                maxlength="50"
                                v-model="form.carmodel"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="车辆产权:"
                            prop="propertyRightName"
                            :rules="{
                                 required: true,
                                 message: '请选择车辆产权',
                                 trigger: 'change',
                                 validator: (rule, value, callback) => validData(rule, form.propertyRightName, callback)
                               }"
                        >
                            <el-input
                                maxlength="50"
                                v-model="form.propertyRightName"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="车辆归属:" prop="ascription"
                                      :rules="{
                                         required: true,
                                         message: '请选择车辆归属',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.ascription, callback)
                                       }">
                            <el-input
                                maxlength="50"
                                v-model="form.ascription"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="车辆运营城市:"
                            prop="operationsName"
                            :rules="{
                                 required: true,
                                 message: '请选择车辆运营',
                                 trigger: 'change',
                                 validator: (rule, value, callback) => validData(rule, form.operationsName, callback)
                               }"
                        >
                            <el-input
                                maxlength="50"
                                v-model="form.operationsName"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="车辆大区:" prop="region"
                                      :rules="{
                                         required: true,
                                         message: '请选择车辆大区',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.region, callback)
                                       }">
                            <el-input
                                maxlength="50"
                                v-model="form.region"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="合同禀议编号:"
                            prop="contractReportNumber"
                        >
                            <el-input
                                maxlength="50"
                                v-model="form.contractReportNumber"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="合同开始日期:"
                            prop="contractStartTime"
                        >
                            <el-input
                                maxlength="50"
                                v-model="form.contractStartTime"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="合同结束日期:"
                            prop="contractEndTime"
                        >
                            <el-input
                                maxlength="50"
                                v-model="form.contractEndTime"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="客户名称:" prop="customerName"
                                      :rules="{
                                         required: true,
                                         message: '请选择客户名称',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.customerName, callback)
                                       }">
                            <el-input
                                maxlength="50"
                                v-model="form.customerName"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="采购禀议编号:"
                            prop="procurementReportNumber"
                        >
                            <el-input
                                maxlength="50"
                                v-model="form.procurementReportNumber"
                                disabled
                                placeholder="选择车架号/车牌号自动获取"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="产品类型:" prop="contractType"
                                      :rules="{
                                         required: true,
                                         message: '请选择产品类型',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.contractType, callback)
                                       }">
                            <el-select
                                filterable
                                disabled
                                v-model="form.contractType"
                                placeholder="请选择产品类型"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in dict.type.quota_rent_type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                            <!--                            <el-input v-model="form.contractType" readonly placeholder="选择车架号/车牌号自动获取"></el-input>-->
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="车辆状态:" prop="businessType"
                                      :rules="{
                                         required: true,
                                         message: '请选择车辆状态',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.businessType, callback)
                                       }">
                            <el-select
                                filterable
                                disabled
                                v-model="form.businessType"
                                placeholder="请选择车辆状态"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in dict.type.car_business_type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                            <!--                            <el-input v-model="form.businessType" readonly placeholder="选择车架号/车牌号自动获取"></el-input>-->
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="工单类型:" prop="workOrderType"
                                      :rules="{
                                         required: true,
                                         message: '请选择工单类型',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.workOrderType, callback)
                                       }">
                            <el-select
                                v-model="form.workOrderType"
                                clearable
                                @change="$forceUpdate()"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="dict in workList"
                                    :label="dict.name"
                                    :value="dict.code"
                                    :key="dict.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="confim">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { carWorkOrder, queryList } from "@/api/gps/gpsList";
import { getDataList } from "@/api/zcwh/vehicleFilesaApi";
import { isEmpty } from "lodash";

export default {
    dicts: ["quota_rent_type", 'car_business_type'],
    data() {
        return {
            workList: [
                {
                    code: 12,
                    name: "GPS安装",
                },
                //     {
                //     code:13,
                //     name:'GPS续费'
                // },
                {
                    code: 14,
                    name: "GPS维修",
                },
                {
                    code: 15,
                    name: "GPS拆除",
                },
                // ,{
                //     code:17,
                //     name:'GPS排查'
                // }
            ],
            carKey: 0,
            companyOriginList: [],
            areaList: [],
            type: 0,
            illegalQueryAccountId: "",
            title: "新增GPS工单",
            visible: false,
            addressList: [],
            form: {
                carmodel: "",
            },
            // rules: {
            //     vinNo: [
            //         {
            //             required: true,
            //             message: "请选择车架号",
            //             trigger: "change",
            //         },
            //     ],
            //     carNo: [
            //         {
            //             required: true,
            //             message: "请选择车牌号",
            //             trigger: "change",
            //         },
            //     ],
            //     carmodel: [
            //         {
            //             required: true,
            //             message: "请选择品牌/车型/车款",
            //             trigger: "change",
            //         },
            //     ],
            //     propertyRightName: [
            //         {
            //             required: true,
            //             message: "请选择车辆产权",
            //             trigger: "change",
            //         },
            //     ],
            //     ascription: [
            //         {
            //             required: true,
            //             message: "请选择车辆归属",
            //             trigger: "change",
            //         },
            //     ],
            //     operationsName: [
            //         {
            //             required: true,
            //             message: "请选择车辆运营",
            //             trigger: "change",
            //         },
            //     ],
            //     region: [
            //         {
            //             required: true,
            //             message: "请选择车辆大区",
            //             trigger: "change",
            //         },
            //     ],
            //     // contractReportNumber: [
            //     //     {required: true, message: '请选择合同禀议编号', trigger: 'change'}
            //     // ],
            //     // contractStartTime: [
            //     //     {required: true, message: '请选择合同开始日期', trigger: 'change'}
            //     // ],
            //     // contractEndTime: [
            //     //     {required: true, message: '请选择合同结束日期', trigger: 'change'}
            //     // ],
            //     customerName: [
            //         {
            //             required: true,
            //             message: "请选择客户名称",
            //             trigger: "change",
            //         },
            //     ],
            //     // procurementReportNumber: [
            //     //     {required: true, message: '请选择采购禀议编号', trigger: 'change'}
            //     // ],
            //     contractType: [
            //         {
            //             required: true,
            //             message: "请选择产品类型",
            //             trigger: "change",
            //         },
            //     ],
            //     businessType: [
            //         {
            //             required: true,
            //             message: "请选择车辆状态",
            //             trigger: "change",
            //         },
            //     ],
            //     workOrderType: [
            //         {
            //             required: true,
            //             message: "请选择工单类型",
            //             trigger: "change",
            //         },
            //     ],
            // },
            vinList: [],
            carNoList: [],
        };
    },
    mounted() {
    },
    methods: {

        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        vinSel(val) {
            console.log("vinSel", val);
            const carObj = this.vinList.find((item) => {
                return item.vinNo == val;
            });
            this.setData(carObj);
        },
        carSel(val) {
            console.log("carSel", val);
            const carObj = this.vinList.find((item) => {
                return item.carNo == val;
            });
            this.setData(carObj);
        },

        setData(obj) {
            if(obj){
                this.form.carId = obj.carId;
                this.form.vinNo = obj.vinNo;
                this.form.carNo = obj.carNo;
                this.form.brandName = obj.brandName;
                this.form.modelName = obj.modelName;
                this.form.seriesName = obj.seriesName;
                this.form.brandId = obj.brandId;
                this.form.seriesId = obj.seriesId;
                this.form.modelId = obj.modelId;
                this.form.carmodel =
                    obj.brandName + "/" + obj.seriesName + "/" + obj.modelName;
                this.form.propertyRightName = obj.propertyRightName;
                this.form.ascription = obj.ascription;
                this.form.operationsName = obj.operationsName;
                this.form.region = obj.region;
                this.form.contractReportNumber = obj.contractReportNumber;
                this.form.customerName = obj.customerName;
                this.form.procurementReportNumber = obj.procurementReportNumber;
                this.form.contractType = obj.contractType;
                this.form.businessType = obj.businessType;
                this.form.contractStartTime = obj.contractStartTime;
                this.form.contractEndTime = obj.contractEndTime;
            }else {
                this.form.carId = null;
                this.form.vinNo = null;
                this.form.carNo = null;
                this.form.brandName = null;
                this.form.modelName = null;
                this.form.seriesName = null;
                this.form.brandId = null;
                this.form.seriesId = null;
                this.form.modelId = null;
                this.form.carmodel = null;
                this.form.propertyRightName = null;
                this.form.ascription = null;
                this.form.operationsName = null;
                this.form.region = null;
                this.form.contractReportNumber = null;
                this.form.customerName = null;
                this.form.procurementReportNumber = null;
                this.form.contractType = null;
                this.form.businessType = null;
                this.form.contractStartTime = null;
                this.form.contractEndTime = null;
            }

            // this.$f
            //
            // // 重新验证整个表单，可以使用`$refs`获得表单组件引用
            // // 并调用其`validate`方法进行重新验证
            this.$nextTick(() => {
                // this.$refs.formData.validate().then(success => {
                //     if (success) {
                //         console.log('所有表单字段验证通过');
                //     } else {
                //         console.log('表单字段验证存在错误');
                //     }
                // });

                this.$refs.formData.validateField('vinNo');
                this.$refs.formData.validateField('carNo');
                this.$refs.formData.validateField('carmodel');
                this.$refs.formData.validateField('propertyRightName');
                this.$refs.formData.validateField('ascription');
                this.$refs.formData.validateField('operationsName');
                this.$refs.formData.validateField('region');
                this.$refs.formData.validateField('customerName');
                this.$refs.formData.validateField('contractType');
                this.$refs.formData.validateField('businessType');
                this.$refs.formData.validateField('workOrderType');
            });
        },

        getData() {
            queryList({
                pageNum: 1,
                pageSize: 100000,
            }).then((res) => {
                if (res.code == "200") {
                    const { data } = res;
                    this.vinList = data;
                    this.carNoList = data.filter((item) => {
                        return !isEmpty(item.carNo);
                    });
                }
            });
        },

        // 确定按钮
        confim() {
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    if (this.type == 1) {
                        //编辑
                        this.$confirm("确认修改违章查询账号吗?", "提示", {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                        }).then(() => {
                            carWorkOrder(this.form).then((res) => {
                                if (res.code == 200) {
                                    this.close();
                                    this.$emit("success");
                                    this.$message({
                                        type: "success",
                                        message: "修改成功",
                                    });
                                }
                            });
                        });
                    } else {
                        //新增
                        this.$confirm("确认新增GPS工单吗?", "提示", {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                        }).then(() => {
                            carWorkOrder(this.form).then((res) => {
                                if (res.code == 200) {
                                    this.close();
                                    this.$emit("success");
                                    this.$message({
                                        type: "success",
                                        message: "添加成功",
                                    });
                                }
                            });
                        });
                    }
                }
            });
        },
        /**
         * 显示弹框
         * @param {0:新增 1:编辑} type
         * @param {编辑回显的账号id} illegalQueryAccountId
         */
        show(type, illegalQueryAccountId) {
            this.getData();
            this.type = type;
            // 延时处理重置数据,防止数据污染
            this.$nextTick(() => {
                this.$refs.formData && this.$refs.formData.resetFields();
            });
            if (type == 1) {
                //编辑
                this.title = "编辑账号";
                this.illegalQueryAccountId = illegalQueryAccountId;
                // 获取回显数据
                illegalApi
                    .illegalAcountDetail(illegalQueryAccountId)
                    .then((res) => {
                        this.formData = res.data;
                    });
            }
            this.visible = true;
        },
        close() {
            this.visible = false;
        },
    },
};
</script>
<style lang="scss" scoped>
.editStyle {
    width: 200px;
}

.el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
}
</style>
